<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>Slider（滑动条）</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  	<link rel="stylesheet" href="../themes/default/easyui.css" type="text/css"></link>
    <link rel="stylesheet" href="../themes/icon.css" type="text/css"></link>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../js/easyui-lang-zh_CN.js"></script>
  </head>
  <body>
	
	<div style="margin:100px">
		身高：<span id="tip"></span>
		<p/>
		<div id="ss" style="height:400px;width:600px"></div>  
	</div>
	<script type="text/javascript">
		$("#ss").slider({
			mode : "v",
			min : 150,
			max : 190,
			rule : [ 150,'|',160,'|',170,'|',180,'|',190 ],
			showTip : true,
			value : 150
		});
	</script>
		
		
	<script type="text/javascript">
		$("#ss").slider({
			onChange : function(newValue){
				if(newValue == 160){
					$("#tip").text("合格").css("color","blue");
				}else if(newValue == 170){
					$("#tip").text("良好").css("color","green");
				}else if(newValue == 180){
					$("#tip").text("优秀").css("color","pink");
				}else if(newValue == 190){
					$("#tip").text("卓越").css("color","red");
				}	
			}
		});
	</script>
		
  </body>
</html>




